<template>
  <view>
    <view class="u-p-l-20 u-p-r-20">
      <u-row style="flex-wrap: wrap;">
        <u-col style="width: 50%" v-for="(item, index) in stores" :key="index">
          <view class="card-item" :class="[activeIndex === index ? 'active' : '']" @click="choose(item, index)">
            <view class="txt-large u-warning">{{ item.price }}</view>
            <view class="u-tips-color u-m-t-10">{{ item.description }}</view>
          </view>
        </u-col>
      </u-row>
    </view>
    <u-sticky bgColor="#fff">
      <u-tabs :list="list1" v-model:current="tabIndex"></u-tabs>
    </u-sticky>
    
    <template v-if="tabIndex == 0">
      <up-divider text="充值记录"></up-divider>
      <up-cell-group v-if="history.length">
        <up-cell title="充值金额" :value="item.coin" v-for="(item, index) in history" :key="index"></up-cell>
      </up-cell-group>
      <up-empty v-if="!history.length" style="margin-top: 10vh;" />
    </template>

    <template v-if="tabIndex == 1">
      <up-divider text="动账记录"></up-divider>
      <up-cell-group v-if="history2.length">
        <up-cell :title="item.remark" :value="item.amount + '元'" v-for="(item, index) in history2" :key="index"></up-cell>
      </up-cell-group>
      <up-empty v-if="!history2.length" style="margin-top: 10vh;" />
    </template>

    
    <up-gap height="70" bgColor="#ffffff" />
    <view class="footer">
      <up-button :color="$u.color.mainColor" @click="toPay">充值</up-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      tabIndex: 0,
      list1: [{
        name: '充值记录'
      },
      {
        name: '动账记录'
      }],
      stores: [],
      activeIndex: '',
      activeRow: null,
      history: [],
      history2: [],
      totalCount: 0,
    }
  },
  onLoad() {
    this.getStore()
    this.getHistory()
  },
  methods: {
    async getStore() {
      const res = await this.$api.wallet.rechargeStore()
      this.stores = res.data
    },
    choose(item, index) {
      this.activeIndex = index
      this.activeRow = item;
    },
    async getHistory() {
      const res = await this.$api.wallet.history({
        page: 1,
        pageSize: 1000
      })
      const res2 = await this.$api.order.trace({
        page: 1,
        pageSize: 1000
      })

      this.history = res.data.items
      this.totalCount = res.data.totalCount
      this.history2 = res2.data.items
    },
    async toPay() {
      if (!this.activeRow) {
        this.$u.toast('请选择充值金额')
        return
      }
      const {code, data} = await this.$api.wallet.pay({
        id: this.activeRow.id
      })

      if (code == 200) {
        if (uni.getSystemInfoSync().host !== 'KUAISHOU') {
          if (data.jsPay) {
            this.paysdk(data)
          } else {
            uni.navigateTo({ url: '/pages/pay-success/pay-success?id=' + data.id + '&type=recharge' })
          }
        } else {
          ks.pay({
              serviceId: '1',
              orderInfo: {
                order_no: data.payInfo.order_no,
                order_info_token: data.payInfo.order_info_token
              },
              success() {
                  // 支付成功
                  console.log("支付成功");
                  uni.navigateTo({ url: '/pages/pay-success/pay-success?id=' + data.id + '&type=recharge' })
              },
              fail() {
                  // 支付失败
              },
          });
        }
      }
      },
      paysdk(data) {
      uni.getProvider({
          service: 'payment',
          success: function (res) {
              console.log(res.provider)
              if (~res.provider.indexOf('wxpay')) {
                  uni.requestPayment({
                      provider: "wxpay",  //固定值为"wxpay"
                      ...data.jsPay,
                      orderInfo: data.jsPay,
                      success: function (res) {
                          // var rawdata = JSON.parse(res.rawdata);
                          console.log("支付成功");
                          uni.navigateTo({ url: '/pages/pay-success/pay-success?id=' + data.id + '&type=recharge' })
                      },
                      fail: function (err) {
                          console.log('支付失败:' + JSON.stringify(err));
                      }
                  });
              }
          }
      });

      },
  }
}
</script>

<style lang="scss" scoped>
.card-item {
  border: 1px solid $u-border-color;
  margin: 5px;
  text-align: center;
  padding: 10px 5px;
  border-radius: 5px;

  &.active {
    border: 1px solid $u-warning-dark;
  }
}

.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 999;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
}
</style>